uniapp 的app嵌套 uniapp的h5 交换及 webview动态设置高度

2024-01-10 22:34| 来源: 网络整理| 查看: 265

文档地址

uni-app官网

1 需要页面是nvue 因为这样webview页面不再是固定全屏可以设置是否有头，然后可以自己设置沉浸模式的颜色等

2 动态设置高度就是通过api 获取设备高度利用里面的利用 statusBarHeight 获取状态栏高度

利用 windowHeight 获取屏幕高度。然后相减去设定 webview去掉沉浸模式的高度

statusbar = sysinfo.statusBarHeight; height = sysinfo.windowHeight; this.height = height - statusbar this.statusbarHeight = statusbar

3 uniapp的app套uniapp的h5的时候要具备以下条件

1) webview要是nvue

2）webview 组建上监听 @onPostMessage="onPostMessage" 返回值的结构如下图1

3）uniapp 的h5 项目要用h5模版也就是 template.h5.html 然后在模版页面下面 body标签的下面添加script标签引入 uniapp的 webviewapi

4）h5 项目调用 uni 的跳转方法时如果要去 app 的跳转页面。需要这么写。

goback(){ uni.webView.reLaunch({ url: '/pages/mine/login/index' }); },

需要 uni去点一层 webview对象

5）h5 项目调用 app方法进行交互的写法

uni.webView.postMessage({ data:{ action, data } })

app利用以下代码进行接收

methods:{ onPostMessage(res){ console.log(res); let {action,data} = res.detail.data[0] switch(action){ case 'console': console.info(data) break; case 'setTitleColor': this.colorValue = data.color break; case 'hideLoading': uni.hideLoading() break; } }, }

对应进行操作

整体代码 app端如下

export default { data() { return { webUrl: "", height:0, statusbarHeight:0, webviewStyles:{ progress:false }, colorValue:'#9E000C' }; }, onLoad(options) { uni.showLoading({ title:'加载中', mask:true }) this.webUrl = options.webUrl; let height = 0; //定义动态的高度变量 let statusbar = 0; // 动态状态栏高度 uni.getSystemInfo({ // 获取当前设备的具体信息 success: (sysinfo) => { statusbar = sysinfo.statusBarHeight; height = sysinfo.windowHeight; this.height = height - statusbar this.statusbarHeight = statusbar } }); }, methods:{ onPostMessage(res){ console.log(res); let {action,data} = res.detail.data[0] switch(action){ case 'console': console.info(data) break; case 'setTitleColor': this.colorValue = data.color break; case 'hideLoading': uni.hideLoading() break; } }, } }

整体h5代码如下 template.h5.html

document.addEventListener('DOMContentLoaded', function() { document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px' }) Please enable JavaScript to continue. /*BAIDU_STAT*/

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章